<script setup>
import {ref} from "vue";

const props = defineProps({
  params: {
    type: Array,
    default: () => []
  }
})
const modelValue = ref("PhyDNet")
const modelOptions = ref([
  {
    value: "PhyDNet",
    label: "PhyDNet"
  },
  {
    value: "ConvLSTM",
    label: "ConvLSTM"
  }
])
const input3 = ref()
</script>

<template>
  <div class="heat-right1" v-if="params.length>0">
    <h2 class="title">参数设置</h2>
    <div class="setting">
      <div class="setting-item">
        <div class="item-inner">
          <el-select
              v-model="modelValue"
              class="m-2"
              placeholder="模型选择"
          >
            <el-option
                v-for="item in modelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <template v-for="(param,i) in params" :key="param.label">
        <div class="setting-item">
          <div class="item-inner">
            <el-input
                v-model="param.value"
                class="w-50 m-2"
                placeholder="=0.2"
            >
              <template #prefix>
                <span class="info">
                  {{ param.label }}
                </span>
              </template>
            </el-input>
            <!-- 默认值0.2-->
          </div>
        </div>
      </template>
    </div>
    <div class="set">
      <el-button type="primary" round class="ml30">设置</el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.heat-right1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .title {
    font-size: 24px;
    text-align: center;
    flex: 1;
  }

  .setting {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    .setting-item {
      width: 33.3%;
      .item-inner {
        margin: 0 8px 12px;
        .info {
          color: #000;
        }
      }
    }

  }

  .set {
    margin-top: 10px;
    margin-right: 30px;
    display: flex;
    justify-content: end;
    flex: 1;

    .el-button {
      justify-content: flex-end;
    }

    //align-self: flex-end;
  }
}







.ml30 {
  margin-left: 30px;
}

@media screen and (max-width: 2000px) {
  .heat-right1 {
    /*border:1px solid blue;*/
    display: flex;
    //flex-direction: column;
    flex-wrap: wrap;
    padding-top: 15px;
    height: 105px;
  }
}

</style>
<!--2024/2/8 12:46-->